<template>
    <div class="container-404">
        <div class="content">
            <h1>404</h1>
            <div class="desc">抱歉，你访问的页面不存在</div>
            <el-button type="primary" @click="goBack">{{ countdown }}秒后，返回首页</el-button>
        </div>
    </div>
</template>
<script>
import { ref, defineComponent, onMounted} from 'vue'
import { onBeforeRouteLeave, useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const router = useRouter()
        let inter = ref(null)
        let countdown = ref(5)
        onBeforeRouteLeave((to,from,next)=>{
            clearInterval(inter.value)
            next()
        })

        onMounted(() =>{
            inter.value = setInterval(() => {
                countdown.value--
                if (countdown.value == 0) {
                    clearInterval(inter.value)
                    goBack()
                }
            }, 1000)
        })

        function  goBack() {
            router.push('/')
        }


        return {
            countdown,
            goBack
        }
    },
})
</script>


<style lang="less" scoped>
.container-404{
    position: relative;
    width: 100vw;
    height: 100vh;
    .content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 250px;
        height: 225px;
        text-align: center;
        h1 {
            margin: 0;
            font-size: 72px;
            color: #303133;
        }
        .desc {
            margin: 20px 0 30px;
            font-size: 20px;
            color: #606266;
        }
    }
}

</style>
